{extend name="public:base"}
{block name="style"}
    <style>
        html, body, .layui-layout{overflow: hidden;}
        .layui-form {width: 300px !important;margin: auto !important;margin-top: 160px !important;}
        .layui-form button {width: 100% !important;height: 44px !important;line-height: 44px !important;font-size: 16px !important;background-color: #3963bc !important;font-weight: 550 !important;}
        .layui-form-checked[lay-skin=primary] i {border-color: #3963bc !important;background-color: #3963bc !important;color: #fff !important;}
        .layui-tab-content {margin-top: 15px !important;padding-left: 0px !important;padding-right: 0px !important;}
        .layui-form-item {margin-top: 20px !important;}
        .layui-input {height: 44px !important;line-height: 44px !important;padding-left: 15px !important;border-radius: 3px !important;}
        .layui-input:focus {border-color: #3963bc !important;box-shadow: 0px 0px 2px 1px #3963bc !important;}
        .layui-form-danger:focus{box-shadow: 0px 0px 2px 1px #ff4d4f !important;}
        .logo {width: 60px !important;margin-top: 10px !important;margin-bottom: 10px !important;margin-left: 20px !important;}
        .title {font-size: 24px !important;font-weight: 400 !important;color: #3963bc !important;display: inline-block !important;height: 48px !important;line-height: 48px !important;margin-top: 10px !important;}
        .desc {width: 100% !important;font-weight: 400 !important;text-align: center !important;color: gray !important;height: 30px !important;line-height: 30px !important;}
        body {background-repeat:no-repeat;background-color: whitesmoke;background-size: 100%;height: 100%;background:url('/assets/images/bg.jpg');background-size: cover; }
        .code {float: left;margin-right: 13px;margin: 0px !important;border: #e6e6e6 1px solid;display: inline-block!important;    width: 178px!important;}
        .codeImage {float: right;height: 42px;border: #e6e6e6 1px solid;}
        @media (max-width:768px){body{background-position:center;}}
        .notice{position:fixed; top:50px; left:0;width:100%;z-index: 10000;}
        .notice .remark{width:100%;max-width:780px;margin: 0 auto;}
    </style>
{/block}
{block name="body"}
	<body>
        {notempty name="notice"}
        <div class="notice">
            <div class="remark">
                <blockquote class="layui-elem-quote">
                    {$notice}
                </blockquote>
            </div>
        </div>
        {/notempty}
		<form class="layui-form" action="javascript:void(0);">
			<div class="layui-form-item" style="text-align:center;">
				<div class="title">会员登录</div>
			</div>
			<div class="layui-form-item">
				<input placeholder="账 户" type="text" name="username" lay-verify="required" hover class="layui-input"/>
			</div>
			<div class="layui-form-item">
				<input placeholder="密 码" type="password" name="password"  lay-verify="required" hover class="layui-input"/>
            </div>
			
			<div class="layui-form-item">
				<input placeholder="验证码 : " type="text" maxlength="4" name="captcha" lay-verify="required" hover class="code layui-input layui-input-inline"/>
				<img id="codeimg"  class="codeImage" style="width:120px;" style="cursor: pointer;"/>
			</div>
			<div class="layui-form-item">
				<button  class="pear-btn pear-btn-primary" lay-submit lay-filter="login">
					登 入
				</button>
			</div>
            <div class="layui-form-item">
                <div style="text-align: right;">
                没有账号，我要<a href="{:url('register/index')}" style="cursor: pointer;color:#3963bc">注册</a>
                </div>
            </div>
		</form>
	</body>
{/block} 
{block name="custome"}
{/block}
{block name="script"} 
<script>
    top.location.href == self.location.href || (top.location.href = self.location.href);
    layui.use(['form', 'layer', 'jquery', 'element'], function () {
        var $ = layui.jquery
         , layer = layui.layer
         , element = layui.element
         , form = layui.form;
        // 登 录 提 交
        form.on('submit(login)', function(data) {
            layer.load();
            $.ajax({
                type: "POST",
                dataType: "json",
                data: data.field,
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code==1){
                        layer.msg(res.msg,{icon:1,time:1000},function () {
                            location.href = "{:url('index/index')}";
                        })
                    } else {
                        layer.msg(res.msg,{icon:2,time:1000},function () {
                            initCode();
                        })
                    }
                }
            });
            return false;
        });
        
        function initCode() {
            $('#codeimg').attr("src","{:url('captcha/index')}?d=" + new Date().getTime());
        }
        initCode();
        $('#codeimg').on('click', function () {
            initCode();
        });
    })
</script>
{/block}
</html>
